<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico" />
  <title>MicroApp</title>
  <link rel="stylesheet" href="./home/css/index.css">
  <link rel="stylesheet" href="./home/css/animation.css">
  <script src="./home/js/index.umd.js"></script>
  <script src="./home/js/micro-app-loading.js"></script>
  <script src="./home/js/iconfont.js"></script>
</head>
<body>
  <main class="main-page">
    <section class='top-container'>
      <header class='home-header'>
        <div class='logo-con'>
          <a href="/">
            <img src="./home/assets/logo.png" alt="logo" class="logo-img">
            <span class="logo-title">MicroApp</span>
          </a>
        </div>
        <nav class='header-nav'>
          <a class='header-nav-title' href="./docs.html">文档</a>
          <a class='header-nav-title' href="https://micro-zoe.com/docs/1.x/#/zh-cn/start">1.x文档</a>
          <a class='header-nav-title' href="https://zeroing.jd.com/micro-app/demo/" target="blank">示例</a>
          <a class='header-nav-title' href="https://github.com/micro-zoe/micro-app" target="blank"><img class='github-icon' src="./home/assets/github-logo.png" alt="github"></a>
        </nav>
      </header>
      <section class='introduce'>
        <div class='introduce-title'>MicroApp</div>
        <p class='introduce-desc'>一款轻量、高效、功能强大的微前端框架</p>
        <div class="introduce-btn-list">
          <a href="./docs.html" class='btn-start'>开始使用</a>
          <a href="https://zeroing.jd.com/micro-app/demo/" class='btn-coding' target="blank">在线案例</a>
        </div>
      </section>
      <section class="home-show">
        <div class='home-show-main'>
          <div class='home-show-main-back'>
            <div class="home-show-top"></div>
            <div class="home-show-left"></div>
            <div class="home-show-micro-con">
              <div class="home-show-micro">
                <img src="./home/assets/logo.png" alt="logo" class="home-show-logo">
              </div>
              <div class="home-show-micro">
                <img src="./home/assets/logo.png" alt="logo" class="home-show-logo">
              </div>
            </div>
          </div>
        </div>
      </section>
      <aside class="decoration-top"></aside>
      <aside class="decoration-bottom"></aside>
    </section>
    <section class="content-demo">
      <h2 class="content-main-title">特性</h2>

      <section class="content-common">
        <h3 class="content-common-title">只需一行代码，实现微前端，如此简单</h3>
        <div class="content-common-detail">
          <img class='content-one-img' src="./home/assets/one-line.png" alt="">
          <img class='content-common-arrow-right' src="./home/assets/arrow-right.png" alt="">
          <div class='micro-app-con micro-app-con-one'>
            <!-- <micro-app name="my-app1" url="http://localhost:3002/" /> -->
          </div>
        </div>
      </section>

      <section class="content-common">
        <h3 class="content-common-title">无关技术栈，任何框架皆可使用</h3>
        <div class="content-common-detail">
          <div class="content-two-imgs-con">
            <div class="content-two-img-con">
              <img class="content-two-img-logo" src="./home/assets/react-logo.png" alt="">
              <img class="content-two-img-code" src="./home/assets/react-code.png" alt="">
            </div>
            <div class="content-two-img-con">
              <img class="content-two-img-logo" src="./home/assets/vue-logo.png" alt="">
              <img class="content-two-img-code" src="./home/assets/vue-code.png" alt="">
            </div>
          </div>
          <img class='content-common-arrow-right' src="./home/assets/arrow-right.png" alt="">
          <div class='micro-app-con micro-app-con-two'>
            <!-- <micro-app name="my-app2" url="http://localhost:3002/" /> -->
          </div>
        </div>
      </section>

      <section class="ability-list">
        <h2 class="ability-list-title">能力</h2>
        <div class="ability-list-cont">
          <div class="ability-item">
            <div class="ability-item-icon-con">
              <svg class="icon ability-icon-sandbox" aria-hidden="true">
                <use xlink:href="#icon-sandbox"></use>
              </svg>
            </div>
            <h4>JS沙箱</h4>
          </div>
          <div class="ability-item">
            <div class="ability-item-icon-con ability-item-icon-css">
              <svg class="icon ability-icon-css" aria-hidden="true">
                <use xlink:href="#icon-css"></use>
              </svg>
              <svg class="icon ability-icon-css" aria-hidden="true">
                <use xlink:href="#icon-css"></use>
              </svg>
            </div>
            <h4>样式隔离</h4>
          </div>
          <div class="ability-item">
            <div class="ability-item-icon-con ability-item-icon-element">
              <svg class="icon ability-icon-element" aria-hidden="true">
                <use xlink:href="#icon-element"></use>
              </svg>
            </div>
            <h4>元素隔离</h4>
          </div>
          <div class="ability-item">
            <div class="ability-item-icon-con ability-item-icon-tongxun">
              <svg class="icon ability-icon-tongxun" aria-hidden="true">
                <use xlink:href="#icon-tongxun"></use>
              </svg>
            </div>
            <h4>数据通信</h4>
          </div>
          <div class="ability-item">
            <div class="ability-item-icon-con ability-item-icon-plugin">
              <svg class="icon ability-icon-plugin" aria-hidden="true">
                <use xlink:href="#icon-plugin"></use>
              </svg>
            </div>
            <h4>插件系统</h4>
          </div>
          <div class="ability-item">
            <div class="ability-item-icon-con ability-item-icon-prefetch">
              <svg class="icon ability-icon-prefetch" aria-hidden="true">
                <use xlink:href="#icon-prefetch"></use>
              </svg>
            </div>
            <h4>预加载</h4>
          </div>
        </div>
      </section>
      <div class="content-thrid-btn">
        <a href="./docs.html" class='btn-start'>快速开始</a>
      </div>
    </section>
    <footer class="footer">
      <div class="footer-content">
        <dl>
          <dt>相关地址</dt>
          <dd><a target="blank" href="https://github.com/micro-zoe/micro-app/issues">BUG反馈</a></dd>
          <dd><a target="blank" href="https://gitter.im/microzoe/micro-app">聊天室</a></dd>
          <dd><a target="blank" href="https://github.com/micro-zoe/micro-app/discussions">GitHub讨论组</a></dd>
        </dl>
        <dl>
          <dt>更多</dt>
          <dd>
            <a target="blank" href="https://github.com/micro-zoe/micro-app">GitHub</a>
          </dd>
          <dd>
            <a target="blank" href="https://github.com/micro-zoe/micro-app/releases">更新日志</a>
          </dd>
        </dl>
      </div>
    </footer>
  </main>
  <script src="./home/js/index.js"></script>
</body>
</html>
